<template>
	<!-- 登录之后弹窗 -->
	<u-overlay :show="show" :zIndex="999995"
		@touchmove.stop.prevent="moveHandle">
		<view class="container u-flex-column u-col-center u-flex-center">
			<view class="header" v-if="couponList.length > 0">
				<view class="li u-flex u-col-end" v-for="(item,index) in couponList" :key="index">
					<view class="li-left">
						<view v-if="item.discount_method == 1 || item.discount_method == 2" style="width: 110rpx;text-align: center;">
							<span style="font-size: 20rpx;">￥</span>
							<span
								style="font-size: 26rpx;">{{item.discount_method == 1?item.full_reduce:item.direct_reduce}}</span>
							<span style="font-size: 18rpx;padding-left: 4rpx;">元</span>
						</view>
						<view v-else style="width: 110rpx;text-align: center;">
							<span style="font-size: 26rpx;">{{item.discount}}</span>
							<span style="font-size: 20rpx;padding-left: 4rpx;">折</span>
						</view>
					</view>
					<view class="type">
						{{item.discount_method == 1?'满减券':item.discount_method == 2?'直减券':'折扣券'}}
					</view>
					<view class="li-text">{{item.name.length > 8 ? item.name.substring(0, 8) : item.name}}</view>
				</view>
			</view>
			<view class="main" @click="jump">
				<u-image :src="systemConfig.index_popup_login_img || ''" :showMenuByLongpress="false" width="100%"
					height="660rpx"></u-image>
			</view>
			<view class="icon u-flex-center u-col-center" v-if="isIcon" @click="close">
				<image :src="$getImageUrl('/user_client/static/icons/close.svg')" class="icon-img"></image>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				isIcon: uni.getStorageSync('isIcon') || false
			}
		},
		props: {
			couponList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
				isLogin: state => state.user.isLogin,
				isCoupon: state => state.popFrame.isCoupon
			})
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
				setTimeout(()=>{
					this.isIcon = true
					uni.setStorageSync('isIcon',this.isIcon)
				},1000)
			},
			// 跳转
			jump() {
				const url = this.systemConfig.index_popup_login_url
				if (url == "") return;
				if (url.includes('/pages')) {
					this.$switchTab(url)
				} else {
					this.$navigateTo(url)
				}
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.header {
			width: 440rpx;

			.li {
				padding: 0 15rpx 0 10rpx;
				box-sizing: border-box;
				width: 440rpx;
				height: 72rpx;
				line-height: 72rpx;
				margin-bottom: 20rpx;
				background: url() center top / 100% auto no-repeat;

				.li-left {
					flex-shrink: 0;
					color: #CC242B;

					.img {
						width: 31rpx;
						height: 32rpx;
					}
				}

				.type {
					font-size: 26rpx;
					color: #CC242B;
					flex-shrink: 0;
				}

				.li-text {
					font-size: 26rpx;
					color: $base-color;
					padding-left: 30rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}

		.main {
			width: 440rpx;
			height: 660rpx;
		}

		.icon {
			margin-top: 60rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;

			.icon-img {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}
	}
</style>